<template>
	<view class="content" style="height: calc(108vh);">
		<!-- 顶部用户昵称信息 -->
		<view class="headinfo">
			<!-- 编辑设置 -->
			<view class="editSettings">
				<u-row gutter="0">
					<u-col span="9">
						.
					</u-col>
					<u-col span="3">
						<view class="editSettingsIcon">
							<u-icon name="edit-pen-fill" color="#ffffff" @click="editPen" style="margin-right: 35rpx;" size="50"></u-icon>
							<u-icon name="setting-fill" color="#ffffff" @click="settings" size="50"></u-icon>
						</view>
					</u-col>
				</u-row>
			</view>
			<!-- 头像昵称 -->
			<view class="head">
				<u-row gutter="0">
					<u-col span="2">
						<view class="headIcon">
							<u-avatar @click="headClick" :src="headImg" mode="square"></u-avatar>
						</view>
					</u-col>
					<u-col span="5">
						<view>
							<text>{{userName}}</text>
						</view>
					</u-col>
					<u-col span="5">
					</u-col>
				</u-row>
			</view>
		</view>
		<!-- 选项列表 -->
		<view class="itemList">
			<view class="item" @click="itemClick(1)" v-for="(item,index) in itemList" :key="index">
				<u-row gutter="0">
					<u-col span="1">
						<view>
							<u-icon style="padding-left: 20rpx;" :name="item.icon" size="30" color="#888888"></u-icon>
						</view>
						
					</u-col>
					<u-col span="9">
						<view class="itemText">
							<text>{{item.text}}</text>
						</view>
					</u-col>
					<u-col span="1">
						<view class="count">
							<text>{{item.count}}</text>
						</view>
					</u-col>
					<u-col span="1">
						<u-icon style="padding-left: 20rpx;" name="arrow-right" size="24" color="#888888"></u-icon>
					</u-col>
				</u-row>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		async onLoad() {
			
			//系统列表
			await this.$u.api.getSystem().then(res=>{
				console.log('System数据获取成功')
				if(res.success){
					// this.$data.list = this.$u.deepClone(res.data)
					for(let i=0;i<res.data.length;i++){
						this.$data.itemList[i].text = res.data[i].itemname;
					}
				}
			}).catch(err=>{
				console.log('System数据获取失败')
				console.log(err)
			})
			
			//获取用户信息
			await this.$u.api.getUser('/2').then(res=>{
				console.log('User数据获取成功')
				if(res.success){
					//赋值头像和昵称
					this.$data.headImg = res.data[0].avatar;
					this.$data.userName = res.data[0].name;
					//填充列表数字
					res.data.forEach(item1=>{
						this.$data.itemList.forEach(item2=>{
							if(item1.itemname == item2.text){
								item2.count = item1.count;
							}
						})
						
					})
				}
			}).catch(err=>{
				console.log('User数据获取失败')
				console.log(err)
			})
			
			
		},
		data() {
			return {
				headImg:'',
				userName:"",
				itemList:[
					{
						icon:'plus-people-fill',
						text:'',
						count:0,
					},
					{
						icon:'plus-people-fill',
						text:'',
						count:0,
					},
					{
						icon:'thumb-down-fill',
						text:'',
					},
					{
						icon:'order',
						text:'',
					},
					{
						icon:'file-text-fill',
						text:'',
					},
					{
						icon:'clock-fill',
						text:'',
					},
					{
						icon:'question-circle-fill',
						text:'',
					},
					{
						icon:'rewind-left-fill',
						text:'',
					}
				]
			}
		},
		methods: {
			editPen(){
				console.log('编辑')
			},
			settings(){
				console.log('设置')
			},
			headClick(){
				console.log('头像点击')
			},
			itemClick(index){
				console.log(index)
			}
		}
	}
</script>

<style lang="scss">
	//整体背景色
	.content{
		background-color: #222222;
		// 顶部用户昵称信息
		.headinfo{
			height: 360rpx;
			background: url('~@/static/notifications/shineitup.jpg');
			 // 编辑设置
			.editSettings{
				/* #ifndef MP-WEIXIN */
					padding-top: 80rpx;
				/* #endif */
				/* #ifdef MP-WEIXIN */
					padding-top: 150rpx;
				/* #endif */
				
				.editSettingsIcon{
					
				}
			}
			// 头像昵称
			.head{
				color: #FFFFFF;
				font-size: 35rpx;
				/* #ifndef MP-WEIXIN */
					margin-top: 100rpx;
				/* #endif */
				
				.headIcon{
					padding-left: 25rpx;
				}
				
			}
		}
		// 选项列表
		.itemList{
			color: #888888;
			.item{
				padding-top: 40rpx;
				padding-bottom: 40rpx;
				
				.itemText{
					padding-left: 20rpx;
				}
				.count{
					// padding-left: 30rpx;
					text-align: right;
				}
			}
			.followers{
				
			}
			.youUpdate{
				
			}
			.activity{
				
			}
			.post{
				
			}
			.history{
				
			}
			.support{
				
			}
			.signout{
				
			}
		}
	}
	
	//===================================
	//顶部高度隔离
	/* #ifdef APP-PLUS */
		.top-height{
			height: 60rpx;
		}
	/* #endif */
	/* #ifdef MP-WEIXIN */
		.top-height{
			height: 140rpx;
		}
	/* #endif */
	/* #ifdef H5 */
	.top-height{
		height: 80rpx;
	}
	/* #endif */
	//===================================
</style>
